// src/info/pay.tsx
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useRouter } from 'expo-router';
import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { RadioButton } from 'react-native-paper';
import { Alert } from 'react-native';
import { Linking } from 'react-native';
import { usePayContext  } from '../AppContext';

export default function Pay() {
    const { item, total } = usePayContext();
    const router = useRouter();
    const [usePoints, setUsePoints] = React.useState(false);
    const [paymentMethod, setPaymentMethod] = React.useState('wechat');

    // 打印接收的 item 和 total 以确保其格式正确
    console.log('Received Item:', item);
    console.log('Received Total:', total);

    const openWeChat = async () => {
        const wechatUrl = 'wechat://';

        try {
            const canOpen = await Linking.canOpenURL(wechatUrl);
            console.log(`Can open URL ${wechatUrl}:`, canOpen);

            if (canOpen) {
                await Linking.openURL(wechatUrl).then(() => {
                    console.log('Successfully opened WeChat');
                }).catch(err => {
                    console.error('Failed to open URL:', err);
                });
            } else {
                console.log("无法打开微信");
            }
        } catch (err) {
            console.error('Error checking URL scheme:', err);
        }
    };

    const handleBuy = () => {
        console.log('待跳转');
        
        router.push({
            pathname: '/info/WeiChatPay',
        });
    };

    return (
        <View style={styles.container}>
            <View style={styles.itemContainer}>
                <Image source={{ uri: item.src }} style={styles.image} />
                <View style={styles.textContainer}>
                    <Text style={styles.text}>标题: {item.title || '未知商品'}</Text>
                    <Text style={styles.text}>价格: ￥{item.price || '未知价格'}</Text>
                    <Text style={styles.text}>总价: ￥{total || 420}</Text>
                </View>
            </View>
            <View style={styles.deliveryContainer}>
                <ThemedText>配送费</ThemedText>
                <ThemedText>包邮0元</ThemedText>
            </View>
            <View style={styles.separator} />
            <View style={styles.deliveryContainer}>
                <ThemedText>优惠卷</ThemedText>
                <ThemedText>0张可用的优惠卷 &gt;</ThemedText>
            </View>
            <View style={styles.deliveryContainer}>
                <ThemedText>积分</ThemedText>
                <View style={styles.rightContainer}>
                    <ThemedText>可用100积分，抵扣10元</ThemedText>
                    <RadioButton
                        value="points"
                        status={usePoints ? 'checked' : 'unchecked'}
                        onPress={() => setUsePoints(!usePoints)}
                    />
                </View>
            </View>
            <View style={styles.separator} />
            <ThemedText style={{fontWeight: 600}}>支付方式</ThemedText>
            <View style={styles.deliveryContainer}>
                <ThemedText>微信</ThemedText>
                <RadioButton
                    value="wechat"
                    status={paymentMethod === 'wechat' ? 'checked' : 'unchecked'}
                    onPress={() => setPaymentMethod('wechat')}
                />
            </View>
            <View style={styles.deliveryContainer}>
                <ThemedText>支付宝</ThemedText>
                <RadioButton
                    value="alipay"
                    status={paymentMethod === 'alipay' ? 'checked' : 'unchecked'}
                    onPress={() => setPaymentMethod('alipay')}
                />
            </View>
            <View style={styles.bottomBar}>
                <View style={styles.leftButtons}>
                    <ThemedText style={styles.buttonLabel}>￥{total}.00</ThemedText>
                </View>
                <TouchableOpacity style={[styles.button, styles.buyButton]} onPress={handleBuy}>
                    <Text style={styles.buyButtonText}>立即支付</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#fff',
    },
    buyButtonText: {
        color: '#fff',
        textAlign: 'center',
    },
    buttonLabel: {
        color: '#333',
        marginTop: 5,
        fontSize: 22,
        color: 'red',
        fontWeight: 600,
    },
    leftButtons: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    button: {
        padding: 10,
        backgroundColor: '#f0f0f0',
        borderRadius: 5,
    },
    buyButton: {
        width: '30%',
        backgroundColor: '#ff4d4f',
        textAlign: 'center',
    },
    bottomBar: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 10,
        borderTopWidth: 1,
        borderTopColor: '#ccc',
        elevation: 10,
    },
    itemContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    image: {
        width: 100,
        height: 100,
        marginRight: 20,
    },
    textContainer: {
        flex: 1,
    },
    text: {
        fontSize: 16,
        marginBottom: 5,
        lineHeight: 20,
    },
    deliveryContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%',
        height: 25,
        marginTop: 20,
    },
    separator: {
        height: 1,
        backgroundColor: '#ccc',
        marginTop: 15,
        marginBottom: 10,
    },
    rightContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
});